var element, layer, form, laydate, table;
// 保存用户群体设置选择的id
var memberGroupUserId;
var sureMemberGroupUserId;
layui.use(['element', 'layer', 'form', 'laydate', 'table'], function () {
    element = layui.element;
    layer = layui.layer;
    form = layui.form;
    laydate = layui.laydate;
    table = layui.table;
    // 执行一次时间段的时间选择器事件绑定
    timeAdd();
    // 绑定生效时间 选择器
    laydate.render({
        elem:"#takeEffectBegin",
        type:'date'
    })
    laydate.render({
        elem:'#takeEffectEnd',
        type:'date'
    })
    // 选择链接弹窗
    $(".choose-link").on('click',function(){
        layer.open({
            type:2,
            content:'./添加链接/addLink.html',
            area:['90%','90%']
        })
    })
    // 通过往imput上增加data-*属性，来统一监听radio(checkbox)
    form.on('radio(unify-radio)', function (data) {
        var type = $(data.elem).data('type');
        var value = $(data.elem).data('value');
        switch (type) {
            case 'visibleGroup':
                if (value == 'all') {
                    $(".member-group-js").hide(200);
                    $(".member-classify-js").hide(200);
                } else if (value == 'member') {
                    $(".member-group-js").hide(200);
                    $(".member-classify-js").show(200);
                } else if (value == 'group') {
                    $(".member-group-js").show(200);
                    $(".member-classify-js").hide(200);
                }
            break;
            case 'showShopSet':
                if (value == '2') {
                    $(".sectional-btn-js").show();
                    // 显示可见门店的表格
                    canUseShopRender(mockData);
                } else {
                    $(".sectional-btn-js").hide();
                }
            break;
            case 'layerSizeSet':
                var layerSetFlag = false;
                if(value == "1"){
                    layerAdSet({
                        src: 'https://s2.ax1x.com/2019/09/22/u9CjdH.jpg',
                        cssObj: {
                            width: '60px',
                            height: '60px',
                            left: '15px',
                            top: '15px'
                        }
                    }) 
                }else if(value == "2"){
                    layerAdSet({
                        src: 'https://s2.ax1x.com/2019/09/22/u9CjdH.jpg',
                        cssObj: {
                            width: '105px',
                            height: '120px',
                            left: '15px',
                            top: '15px'
                        }
                    })
                }else if(value == "3"){
                    layerAdSet({
                        src: 'https://s2.ax1x.com/2019/09/22/u9CjdH.jpg',
                        cssObj: {
                            width: '375px',
                            height: '667px',
                            left: '0px',
                            top: '0px'
                        }
                    })
                }else if(value == "4"){
                    layerSetFlag = true;
                }

                if(layerSetFlag){
                    $(".layer-set-width-js").show();
                    $(".layer-set-height-js").show();
                }else{
                    $(".layer-set-width-js").hide();
                    $(".layer-set-height-js").hide();
                }
            break;
            case 'layerCloseBtn':
                if(value == "1"){
                    $(".close-layer-btn-js").show();
                    // 关闭按钮显示时默认为出现在右上方
                    form.val('popUpAdForm',{
                        layerCloseBtnPosition:'1' // 这里1 表示关闭按钮在右上方,如果值有变化,这里也要相应修改
                    })
                    $(".img-wrap-btn-one").hide();
                    $(".img-wrap-btn-two").show();
                }else if(value == "0"){
                    $(".close-layer-btn-js").hide();
                    // 浮窗中的按钮也要相应的隐藏起来
                    $(".img-wrap-btn-one").hide();
                    $(".img-wrap-btn-two").hide();
                }
            break;
            case 'layerCloseBtnPosition':
                if(value == 1){
                    // 关闭按钮在右上方
                    $(".img-wrap-btn-one").hide();
                    $(".img-wrap-btn-two").show();
                }else{
                    // 关闭按钮悬浮在下方
                    $(".img-wrap-btn-one").show();
                    $(".img-wrap-btn-two").hide();
                }
            break;

        }
    })
    form.on('checkbox(unify-checkbox)', function (data) {
        var type = $(data.elem).data('type');
        var value = $(data.elem).data('value');
        var checked = data.elem.checked;
        switch (type) {
            case 'showPage':
                // 当选中点餐复选框时显示相应的下级配置项
                if (value == '2') {
                    if (checked) {
                        $(".show-range-js").show(200);
                    } else {
                        $(".show-range-js").hide(200);
                    }
                }
                break;
        }
    })
    // 监听input框输入事件
    $(document).on('blur','.unify-input',function(){
        var type = $(this).data('type');
        var  value = $(this).val();
        debugger
        switch(type){
            case 'setWidth':
            var height = $('input[data-type=setHeight]').val();
            if(value && height){
                layerAdSet({
                    src: 'https://s2.ax1x.com/2019/09/22/u9CjdH.jpg',
                    cssObj: {
                        width: value+'px',
                        height: height+'px',
                        left: '0px',
                        top: '0px'
                    }
                })
            }
            break;
            case 'setHeight':
            var width = $('input[data-type=setWidth]').val();
            if(value && width){
                layerAdSet({
                    src: 'https://s2.ax1x.com/2019/09/22/u9CjdH.jpg',
                    cssObj: {
                        width: width+'px',
                        height: value+'px',
                        left: '0px',
                        top: '0px'
                    }
                })
            }
            break;
        }
    })
    // 监听浮窗中的居中按钮事件
    $(".position-center-btn").on('click',function(){
        // 获取当前浮窗的宽高
        var arr = computeCenter();
        $(".show-img-wrap").css({left:arr[0],top:arr[1]})
    })
    // 设置浮窗的默认大小及图片地址
    layerAdSet({
        src: 'https://s2.ax1x.com/2019/09/22/u9CjdH.jpg',
        cssObj: {
            width: '105px',
            height: '120px',
            left: '15px',
            top: '15px'
        }
    })
    // 浮窗拖动
    initLayerMove();
    // 网格线
    userGrid();
    // 保存事件
    $(".btn-save").on('click',function(){
        // 获取浮窗的左上角的坐标值
        var arr = computeCenter();
        // 这个坐标是基于375px下的,传给微信端需要将值乘二
        var $wrap = $(".show-img-wrap");
        var width = $wrap.width() * 2;
        var height = $wrap.height() * 2;
        var left = $wrap.css('left').replace('px','')*2;
        var top = $wrap.css('top').replace('px','')*2;
        // 获取表单值
        var res = form.val('popUpAdForm');
    })

})
/* 表单初始化 */
// 计算浮窗居中时的坐标
function computeCenter(){
    var width = $(".show-img-wrap").width();
    var height = $(".show-img-wrap").height();
    // 计算浮窗的坐标
    var left = Math.floor((375 - width)/2);
    var top = Math.floor((667 - height)/2);
    return [left,top,width,height];
}
// 显示时段
function timeAdd() {
    $('.datetime').each(function () {
        laydate.render({
            elem: this,
            trigger: 'click',
            type: 'time',
            range: false,
            ready: function (date) {
                
            }
        });
    });
}
//给新增按钮添加点击事件
$('.add-btn-js').click(function () {
    let html2 = `
    <div class="layui-inline">
                <label class="layui-form-label">活动生效时段</label>
                <div class="layui-input-inline" style="width:180px;">
                  <input type="text" name="time1"  placeholder="--:--" autocomplete="off" class="layui-input datetime">
                </div>
                <div class="layui-form-mid">---</div>
                <div class="layui-input-inline" style="width:180px;">
                  <input type="text" name="time1"  placeholder="--:--" autocomplete="off" class="layui-input datetime">
                </div>
                <div class="layui-input-inline" style="width:80px;"><button type="button" class="layui-btn layui-btn-danger add-delete-js"><i
                      class="layui-icon">&#xe640;</i>删除</button></div>
              </div>
    `
    $(".active-effect").append(html2)
    timeAdd()
})
// 给新增加的删除按钮增加事件
$("body").on("click", ".add-delete-js", function () {
    $(this).parents(".layui-inline").remove()
});
// 监听添加会员群体按钮
$("#add-member-group-js").click(function () {
    layer.open({
        type: 1,
        content: $("#addMemberGroupTemplate").html(),
        skin: 'cancel-and-sure',
        area: ['50%', '80%'],
        btn: ['确定', '取消'],
        btnAlign: 'c',
        success: function (lay, index) {
            // 将数据注入到弹出框中
            let arr = [{
                    title: 'A群体',
                    conditions: ['会员等级（等级1、等级2、等级3）', '会员等级（等级1、等级2、等级3）'],
                    id: 1
                },
                {
                    title: 'B群体',
                    conditions: ['会员等级（等级1、等级2、等级3）', '会员等级（等级1、等级2、等级3）'],
                    id: 2
                },
                {
                    title: 'C群体',
                    conditions: ['会员等级（等级1、等级2、等级3）', '会员等级（等级1、等级2、等级3）'],
                    id: 3
                },
                {
                    title: 'B群体',
                    conditions: ['会员等级（等级1、等级2、等级3）', '会员等级（等级1、等级2、等级3）'],
                    id: 4
                },
                {
                    title: 'C群体',
                    conditions: ['会员等级（等级1、等级2、等级3）', '会员等级（等级1、等级2、等级3）'],
                    id: 5
                },
                {
                    title: 'B群体',
                    conditions: ['会员等级（等级1、等级2、等级3）', '会员等级（等级1、等级2、等级3）'],
                    id: 6
                },
                {
                    title: 'C群体',
                    conditions: ['会员等级（等级1、等级2、等级3）', '会员等级（等级1、等级2、等级3）'],
                    id: 7
                },
                {
                    title: 'D群体',
                    conditions: ['会员等级（等级1、等级2、等级3）', '会员等级（等级1、等级2、等级3）'],
                    id: 8
                }
            ];
            // 需要默认选中的id
            let defaultCheckedId = sureMemberGroupUserId;
            arr.forEach(item => {
                let str = `<div id="addMemberGroupWrap" data-title="${item.title}" data-id="${item.id}" class="add-member-group-wrap  ${item.id == defaultCheckedId ? 'active' : ''}">
                             <div class="add-member-group-item">`
                str += "<p>" + item.title + "</p>";
                item.conditions.forEach(i => {
                    str += "<p>" + i + "</p>";
                })
                str += "</div></div>";
                $(".member-popup-wrap").append(str);
            })
            // 绑定点击事件
            $(".add-member-group-wrap").click(function () {
                $(this).addClass('active').siblings().removeClass('active');
                memberGroupUserId = $(this).data("id");
            })
        },
        yes: function (index, lay) {
            // 当点确定时
            sureMemberGroupUserId = memberGroupUserId;
            $("#add-member-group-js").hide();
            $("#memberGroupTextWrap").html($(".add-member-group-wrap.active").data('title') + '<i id="memberGroupClose" class="layui-icon">&#x1006;</i>').show();
            layer.close(index);
        }
    })
})
// 会员群体的删除按钮
$(document).on('click', '#memberGroupClose', function () {
    sureMemberGroupUserId = '';
    $("#memberGroupTextWrap").html('').hide();
    $("#add-member-group-js").show();
})
// 选择部分门店时渲染表格
var mockData = [{
        area: '福州',
        shopName: '门店',
        serverRange: '福州'
    },
    {
        area: '福州',
        shopName: '门店',
        serverRange: '福州'
    },
    {
        area: '福州',
        shopName: '门店',
        serverRange: '福州'
    }
]

function canUseShopRender(data) {
    table.render({
        elem: '#canUseShopTable',
        data: data,
        page: true,
        cols: [
            [{
                    type: 'checkbox'
                },
                {
                    field: 'area',
                    title: '区域',
                    align: 'center'
                },
                {
                    field: 'shopName',
                    title: '适用门店',
                    align: 'center'
                },
                {
                    field: 'serverRange',
                    title: '服务范围',
                    align: 'center'
                },
                {
                    title: '操作',
                    align: 'center',
                    templet: function (d) {
                        return `<button type="button" lay-event="cancel" style="height:26px;line-height:26px;" data-index=${d.LAY_TABLE_INDEX} class="layui-btn layui-btn-sm layui-btn-primary can-use-shop-cancel">取消选择</button>`
                    }
                }
            ]
        ],
        done: function () {
            // 绑定取消事件
            table.on('tool(canUseShopTable)', function (obj) {
                var data = obj.data;
                var layEvent = obj.event;
                var tr = obj.tr;
                var index = $(tr).data('index');
                if (layEvent == 'cancel') {
                    // 将该条数据从mockData中删除
                    mockData.splice(index, 1);
                    canUseShopRender(mockData);
                }
            })
        }
    })
}
// 根据配置 动态设置广告浮窗的大小及位置
function layerAdSet(obj) {
    $(".show-img-wrap").css(obj.cssObj).find('img').attr('src', obj.src);
}
// 设置浮窗可移动事件
function initLayerMove() {
    var oDiv = document.querySelector(".show-img-wrap");
    var arr = [];
    oDiv.onmousedown = function (evt) {
        console.log('绑定了鼠标按下')
        //获取事件对象的兼容
        var e = evt || window.event;
        //获取事件源的兼容
        var target = e.target || e.srcElement;
        //事件委托
        //鼠标相对于事件源元素的x、y坐标
        var disX = e.offsetX;
        var disY = e.offsetY;
        //#box初始位置
        arr.push({
            "left": oDiv.offsetLeft,
            "top": oDiv.offsetTop
        });
        //鼠标移动事件
        document.onmousemove = function (evt) {
            var e = evt || window.event;
            var oHtml = document.querySelector(".show-body-view");
            var left = e.pageX - disX - 50;
            var top = e.pageY - disY - 134;
            console.log(e.pageX,e.pageY);

            //控制#box不脱离浏览器边框
            if (left <= 0) {
                left = 0
            } else if (left >= oHtml.clientWidth - oDiv.offsetWidth) {
                left = oHtml.clientWidth - oDiv.offsetWidth
            }
            if (top <= 0) {
                top = 0;
            } else if (top >= oHtml.clientHeight - oDiv.offsetHeight) {
                top = oHtml.clientHeight - oDiv.offsetHeight;
            }
            oDiv.style.left = left  + 'px';
            oDiv.style.top = top  + 'px';
            console.log(left,top)
        }
        //鼠标松开事件
        document.onmouseup = function () {
            document.onmousemove = null;
        }
        //禁止鼠标拖动
        document.ondragstart = function () {
            return false;
        }
    }
}
// 开启网格 辅助设置
function userGrid() {
    var canvas = document.getElementById('showBodyCanvas');
    context = canvas.getContext('2d');
    function drawGrid(color, stepx, stepy) {
        context.save()
        context.fillStyle = 'white';
        context.fillRect(0, 0, context.canvas.width, context.canvas.height);
        context.lineWidth = 0.5;
        context.strokeStyle = color;
        context.beginPath();
        for (var i = stepx; i < context.canvas.width; i += stepx) {
            context.beginPath();
            context.moveTo(i-0.5, 0);
            context.lineTo(i-0.5, context.canvas.height);
            context.closePath();
            context.stroke();
        }
        for (var j = stepy; j < context.canvas.height; j += stepy) {
            // 每个格子的宽高设置为15,高为667,会有7px无法形成正方形,将这7px放在中间,保证边角是正方形的.
            if(j == 330){
                j += 7;
            }
            context.beginPath();
            context.moveTo(0, j-0.5);
            context.lineTo(context.canvas.width, j-0.5);
            context.closePath();
            context.stroke();
        }
        context.restore();
    }
    drawGrid('#ccc', 15, 15);
}